import React, { useEffect, useState } from 'react'
import { Row, Col, Switch } from 'antd';
import { Link } from "react-router-dom"
import { useDispatch, useSelector } from 'react-redux'
import './index.scss'
import { listItem } from '../../../components/Customer/listItem'
import { head } from '../../../components/Customer/Information/head'
import { Demo } from '../../../components/Customer/TableComponent'
import { SeeCustomer } from '../../../http/customerApi';

export default function Home() {
  // const [date, setDate] = useState([])
  // 信息
  const dateHead = [
    {
      id: 1,
      name: '用户ID',
      key: "id"
    },
    {
      id: 2,
      name: "姓名",
      key: "name"
    },
    {
      id: 3,
      name: "性别",
      key: "sex"
    },
    {
      id: 4,
      name: "年龄",
      key: "age"
    },
    {
      id: 5,
      name: "籍贯",
      key: "native_place"
    },
    {
      id: 6,
      name: "个人年收入",
      key: "money"
    },
    {
      id: 7,
      name: "注册时间",
      key: "id"
    },
    {
      id: 8,
      name: "身份证号",
      key: "identity_card"
    },
    {
      id: 9,
      name: "教育程度",
      key: "age"
    },
    {
      id: 10,
      name: "生日",
      key: "birthday"
    },
    {
      id: 11,
      name: "现居住地址",
      key: "home"
    },
    {
      id: 12,
      name: "用户来源",
      key: "source"
    }
  ]

  // 模拟数据
  const [obj, setObj] = useState({
    id: 12313,
    name: "王娇娇",
    sex: 0,
    age: 10086,
    native_place: '',  //籍贯
    money: 2000,  //  收入
    registration_time: '2022-1-1', // 注册时间
    identity_card: '123123', // 身份证号
    education: '', //教育程度
    birthday: '2022-1-1',  //生日
    home: "no",
    source: ' ',
  })

  // 统计表头
  const StatisticsColumns = [
    {
      title: '贷款金额',
      dataIndex: 'loanTotal',
      render: (text) => <>{text}</>,
    },
    {
      title: '贷款笔数',
      dataIndex: 'loanCount',
      render: (text) => <>{text}</>,
    },
    {
      title: '待还金额',
      dataIndex: 'surplusTotal',
      render: (text) => <>{text}</>,
    },
    {
      title: '最高贷款金额',
      dataIndex: 'maxLoanMoney',
      render: (text) => <>{text}</>,
    },
    {
      title: '逾期次数',
      dataIndex: 'expectFrequency',
      render: (text) => <>{text}</>,
    },
    {
      title: '按时还款率',
      dataIndex: 'onTimeRepayment',
      render: (text) => {
        const newText = text * 100 + '%'
        return <>{newText}</>
      }
    },
    {
      title: '登陆次数',
      dataIndex: 'num',
      render: (text) => <>{text}</>,
    }
  ];
  // 统计列表内容
  const [StatisticsDataList, setStatisticsDataList] = useState([
    {
      key: '1',
      expectFrequency: 0,
      expectMoney: 0,
      loanCount: 2,
      loanTotal: 10,
      maxLoanMoney: 500,
      onTimeRepayment: 1,
      surplusTotal: 0,
    }
  ])

  //银行列表头
  const bankColumns = [
    {
      title: '账户类型',
      dataIndex: 'bank_type',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '账户名',
      dataIndex: 'account_name',
      render: (text) => <>{text}</>,
    },
    {
      title: '银行开户行',
      dataIndex: 'open_bank',
      ellipsis: true,
      render: (text) => <>{text}</>,
    },
    {
      title: '银行开户地',
      dataIndex: 'open_address',
      render: (text) => <>{text}</>,
    },
    {
      title: '支行名称',
      dataIndex: 'branch_name',
      render: (text) => <>{text}</>,
    },
    {
      title: '银行账号',
      dataIndex: 'bank_account',
      render: (text) => <>{text}</>,
    },
    {
      title: '确认银行账号',
      dataIndex: 'bank_account',
      render: (text) => <>{text}</>,
    },
    {
      title: '使用状态',
      dataIndex: 'bank_state',
      render: (text) => <>{text}</>,
    },
  ];
  // 银行列表内容
  const [bankDataList, setBankDataList] = useState([
    {
      key: '8',
      open_bank: 'Disabled User',
      account_name: 99,
      open_address: 'Sidney No. 1 Lake Park',
      bank_type: '成都',
      branch_name: '成都',
      bank_account: '成都',
      bank_state: <Switch defaultChecked onChange={onChange} />
    },
  ])

  //贷款列表头
  const loanColumns = [
    {
      title: '借贷编号',
      dataIndex: 'loan_id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '申请日期',
      dataIndex: 'application_date',
      render: (text) => <>{text}</>,
    },
    {
      title: '用户账号',
      dataIndex: 'loan_account',
      ellipsis: true,
      render: (text) => <>{text}</>,
    },
    {
      title: '申请额度',
      dataIndex: 'applied_amount',
      render: (text) => <>{text}</>,
    },
    {
      title: '借款产品',
      dataIndex: 'loan_product',
      render: (text) => <>{text}</>,
    },
    {
      title: '期限',
      dataIndex: 'time_limit',
      render: (text) => <>{text}</>,
    },
    {
      title: '审批金额',
      dataIndex: 'approval_amount',
      render: (text) => <>{text}</>,
    },
    {
      title: '借款来源',
      dataIndex: 'source',
      render: (text) => <>{text}</>,
    },
    {
      title: '操作',
      dataIndex: 'location',
      render: (text) => <Link to='/home/customer'>{text}</Link>,
    },
  ];
  // 贷款列表内容
  const [loanDataList, setLoanDataList] = useState([
    {
      key: '2',
      source:'未知',
      application_date: "2018-01-16 00:00:00",
      applied_amount: 500000,
      approval_amount: 500000,
      approveLoan: null,
      auditList: null,
      compound_interest: 0,
      contract: null,
      customer: null,
      customer_id: 0,
      loan_account: null,
      loan_channel: 0,
      loan_id: 10001,
      loan_nature: null,
      loan_processing: null,
      loan_product: "工薪贷",
      loan_type: null,
      loan_use: null,
      management_fee: 0,
      receivable: null,
      reimbursement_means: null,
      remind: null,
      state: 5,
      time_limit: 48,
    }
  ])
  // const newObj = useSelector((state) => state.customer.obj)
  // const [newObj, setNewObj] = useState({})
  const thisId = useSelector((state) => state.customer.id)
  useEffect(() => {
    console.log('information页面', thisId);
    // console.log('newObj', newObj);
    SeeCustomer(thisId)
      .then((res) => {
        console.log('action', res.data);
        if (res.data.code === 200) {
          console.log(res.data.data);
          setData(res.data.data[0], res.data.data[1])
        }
      })
      .catch((err) => {
        console.log('action失败', err);
      })
  }, [])

  // 数据处理
  const setData = (data, data1) => {
    setObj({
      ...obj,
      id: data.id,
      name: data.name,
      sex: (data.sex == 1 ? '男' : '女'),
      age: data.age,
      native_place: data.liveInformationl.native_place,  //籍贯
      money: data.professional.income,  //  收入
      registration_time: data.registration_time, // 注册时间
      identity_card: data.identity_card, // 身份证号
      education: data.education, //教育程度
      birthday: '2022-1-1',  //生日
      home: data.liveInformationl.address,
      source: ' ',
    })
    console.log(data1);
    setStatisticsDataList([{
      ...data1,
      surplusTotal: data1.surplusTotal || 0,
      expectFrequency: data1.expectFrequency || 0,
      key: '1',
      num: '1'
    }])
    const newBankData = [...data.listBank].map(item => {
      item.key = Math.random()
      item.bank_state = (item.bank_state == '1') ? <Switch defaultChecked disabled /> : <Switch defaultChecked={false} disabled />
      return item
    })
    console.log(newBankData);
    setBankDataList(newBankData)

    const newLoanData = [...data.listLoan].map(item =>{
      item.key = item.loan_id
      item.source = '未知'
      item.location = '查看详情'
      return item
    })
    console.log(newLoanData);
    setLoanDataList(newLoanData)
  }


  function onChange(checked) {
    console.log(`switch to ${checked}`);
  }

  return (
    <div className='CustomerInformation'>
      {/* 头部信息栏 */}
      <Row className='list'>
        <Col className='Col Col-head' span={6}>
          {head(obj)}
        </Col>
        <Col span={18}>
          {listItem(dateHead, obj, 2)}
        </Col>
        {/* <Col className='Col' span={18}>
          {list(dateHead, obj)}
        </Col>
        <Col className='Col' span={9}>
          {list(dateHead2, obj)}
        </Col> */}
      </Row>
      <button className='btn-information'>
        <Link to='/home/customer/Detailed' className='customerLink'>查看完整档案 &gt;&gt;</Link>
      </button>
      <div className='TableBox'>
        <div>
          <h4>统计信息</h4>
          {Demo(StatisticsColumns, StatisticsDataList, { total: StatisticsDataList.length })}
        </div>

        <div>
          <h4>银行卡信息</h4>
          {Demo(bankColumns, bankDataList, { total: bankDataList.length })}
        </div>

        <div>
          <h4>贷款信息</h4>
          {Demo(loanColumns, loanDataList, { total: loanDataList.length })}
        </div>
      </div>

    </div >
  )
}
